<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>cloudfeeling</title>
    <meta name="keywords" content="cloudfeeling">
    <meta name="description" content="cloudfeeling">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    
    <style>
		#loader {
			transition: all .3s ease-in-out;
			opacity: 1;
			visibility: visible;
			position: fixed;
			height: 100vh;
			width: 100%;
			background: #fff;
			z-index: 90000
		}
		
		#loader.fadeOut {
			opacity: 0;
			visibility: hidden
		}
		
		.spinner {
			width: 40px;
			height: 40px;
			position: absolute;
			top: calc(50% - 20px);
			left: calc(50% - 20px);
			background-color: #333;
			border-radius: 100%;
			-webkit-animation: sk-scaleout 1s infinite ease-in-out;
			animation: sk-scaleout 1s infinite ease-in-out
		}
		
		@-webkit-keyframes sk-scaleout {
			0% {
				-webkit-transform: scale(0)
			}
			100% {
				-webkit-transform: scale(1);
				opacity: 0
			}
		}
		
		@keyframes sk-scaleout {
			0% {
				-webkit-transform: scale(0);
				transform: scale(0)
			}
			100% {
				-webkit-transform: scale(1);
				transform: scale(1);
				opacity: 0
			}
		}
		
	</style>
    
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>
    <link href="/user/default/default.css" rel="stylesheet">
</head>

<body class="app">
<div id="loader">
			<div class="spinner"></div>
		</div>
		<script>
			window.addEventListener('load', () => {
				const loader = document.getElementById('loader');
				setTimeout(() => {
					loader.classList.add('fadeOut');
				}, 300);
			});
		</script>
		<div class="peers ai-s fxw-nw h-100vh">
			<div class="d-n@sm- peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style="background-image:url(assets/static/images/bg.jpg)">
				<div class="pos-a centerXY">
					<div class="bgc-white bdrs-50p pos-r" style="width:120px;height:120px"><img class="pos-a centerXY" style="width:120px;height:120px" src="assets/static/images/logo.png" alt=""></div>
				</div>
			</div>
			<div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style="min-width:320px">
				<h4 class="fw-300 c-grey-900 mB-40">Login</h4>
				<form id="loginform">
					<div class="form-group">
					     <label class="text-normal text-dark">Username</label> 
					     <input type="text" class="form-control" id="username" autocomplete="off" name="userName" value="admin" placeholder="UserName">
					</div>
					<div class="form-group">
					     <label class="text-normal text-dark">Password</label>
					     <input type="password" class="form-control" id="password" autocomplete="off" name="passWord" value="123456" placeholder="Password">
					</div>
					<div class="form-group">
						<div class="peers ai-c jc-sb fxw-nw">
							<div class="peer">
								<div class="checkbox checkbox-circle checkbox-info peers ai-c"><input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <label for="inputCall1" class="peers peer-greed js-sb ai-c"><span class="peer peer-greed">Remember Me</span></label></div>
							</div>
							<div class="peer"><button class="btn btn-primary" id="login">Login</button></div>
						</div>
					</div>
					<div style="color:red" id="top" th:text="${target}"></div>
				</form>
			</div>
		</div>
<script th:inline="javascript"> var ctx = [[@{/}]] ; </script>
<script src="/user/js/vendor.js"></script>
<script src="/user/js/bundle.js"></script>
<script src="/user/plug-in/jquery/jquery.min.js"></script>
<script src="/user/plug-in/jquery-cookie/jquery-cookie.js"></script>
<script>
$(document).ready(function () {
	
	$("#username").on("change",function(){
		$(this).css("border","");
		$("#top").text("");
	})
	$("#password").on("change",function(){
		$(this).css("border","");
		$("#top").text("");
	})
	
    $("#login").on('click',function(event){
    	event.preventDefault();
    	if($("#username").val() === ""){
    		$("#top").text("用户名不能为空");
    		$("#username").css("border","1px solid red");
    	}else if($("#password").val() === ""){
    		$("#top").text("密码不能为空");
    		$("#password").css("border","1px solid red");
    	}else {
    		$.ajax({
                type: "POST",
                url: "/user/login",
                data: $('#loginform').serialize(),
                success: function (r) {
                	console.log(r.result.token);
                	if(r.result.token){
               		    var Days = 30; 
               		    var exp = new Date(); 
               		    exp.setTime(exp.getTime() + Days*24*60*60*1000); 
               		    document.cookie = "token="+ escape (r.result.token) + ";expires=" + exp.toGMTString();
               		    location.href = '/user/index';	
                	}
                },
                error: function(event, XMLHttpRequest, ajaxOptions, thrownError){
                	console.log(event);
                	console.log(XMLHttpRequest);
                	console.log(ajaxOptions);
                	console.log(thrownError);
                	$("#top").text("登录失败，请重试");
               	}
            });
    	}
    });
	
	
});
</script>
</body>
</html>
